/**
 * 采购订单详情
 */
import * as React from 'react'
import { Card, Form, Button, Row, Col, Table, message } from 'antd'
import Authentication from '../../router/Authentication'
import { PageHeaderLayout, DescriptionList, Description } from '../../components'
import '../../assets/style/TableList.less'
import ma from '../../assets/imgs/ma.png'
import img from '../../assets/imgs/img.png'
import  * as style from  './AdvancedProfile.less'
import { ONE_PHASE_API, get } from '../../service/api'
export interface State {
  formValues: string
}
@Authentication
class OrderDetail extends React.Component<any, State> {
  
  state = {
    formValues: '',
  }
  componentDidMount () {
    this.search({}, {})
  }
  handleFormReset = () => {
    const { form } = this.props
    form.resetFields()
    this.setState({
      formValues: ''
    })
    this.search({}, {})
  }
  
  /**
   * 调用查询方法
   */
  search (param: any, page: any) {
    const { list, record } = this.props
    Object.assign(param, { v_sheetid: record.sheetid })
    list(param, page)
  }
  handleConfrimOrder = () => {
    const { record, history } = this.props
    get(ONE_PHASE_API, {
      appid: 'UPSORDER',
      v_sheetid: record.sheetid
    }).then((res: any) => {
      if (res.ret == '1') {
        message.success('操作成功！')
        history.goBack()
      }else {
        message.error(res.ErrorMsg)
      }
    })
  }
  print = () =>{
    const { history } = this.props
    const pb = window.document.getElementById('printBody')
    if(pb) {
      window.document.body.innerHTML = pb.innerHTML
      window.print()
      history.push('/orderlist')
      window.location.reload()
    }
  }
  render () {
    const { loading, data, record, head, user } = this.props
    const action = (
      <React.Fragment>
        <Button type="primary" onClick={this.handleConfrimOrder}>确认</Button>
        <Button type="primary" onClick={this.print}>打印</Button>
      </React.Fragment>
    );
    
    const extra = (
      <Row>
        <Col xs={24} sm={12}>
          <div className={style.textSecondary}>状态</div>
          <div className={style.heading}>{head.status}</div>
        </Col>
        <Col xs={24} sm={12}>
          <div className={style.textSecondary}>订单金额</div>
          <div className={style.heading}>¥ {head.costvalue}</div>
        </Col>
      </Row>
    )
    const description = (
      <DescriptionList title="" className="headerList" size="small" col={2}>
        <Description term="创建人">{record.editor}</Description>
        <Description term="供应商确认人">{record.checker}</Description>
        <Description term="审核时间">{record.checkdate}</Description>
        <Description term="确认时间">{record.vcheckdate}</Description>
        <Description term="开始时间">{record.startdate}</Description>
        <Description term="单据状态">{record.flag}</Description>
      </DescriptionList>
    )
    const columns: any [] = [
      {
        title: '商品条码',
        dataIndex: 'barcode',
      },
      {
        title: '商品名称',
        dataIndex: 'goodslname',
      },
      {
        title: '货号',
        dataIndex: 'customno'
      },
      {
        title: '颜色',
        dataIndex: 'colorid'
      },
      {
        title: '尺码',
        dataIndex: 'sizeid'
      },
      {
        title: '进价',
        dataIndex: 'cost'
      },
      {
        title: '订货量',
        dataIndex: 'qty'
      },
      {
        title: '订货金额',
        dataIndex: 'costvalue'
      },
      {
        title: '实发量',
        dataIndex: 'note2'
      },
      {
        title: '实发金额',
        dataIndex: 'noteje',
      }
    ]
    let totalOne = 0 
    let totalTwo = 0
    let totalThree = 0
    data.list.map((row: any) => {
      totalOne+=row.qty
      totalTwo+=row.note2
      totalThree+=row.noteje
    })
    const getFooter = (): any => <ul className={style.footUl}>
      <li className={style.footLi}>合计：</li>
      <li className={style.footLi}><span>实发量：</span>{totalTwo}</li>
      <li className={style.footLi}><span>订货量：</span>{totalOne}</li>
    </ul>
    return (
      <PageHeaderLayout
      title={<span>单号：{record.sheetid}</span>}
      logo={
        <img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png" />
      }
      action={action}
      content={description}
      extraContent={extra}>
        <Card bordered={false}>
          <div className="tableList">
            <Table
              rowKey = "barcode"
              loading={loading}
              dataSource={data.list}
              columns={columns}
              footer = {getFooter}
            />
          </div>
          <div id={'printBody'} style={{ display: 'none'}}>
            <div style={{color: 'black', fontSize: '12px', fontFamily: '宋体', margin: 'auto', height: '400px', width: '100%', backgroundColor: '#FFFFFF', padding: '5px' }}>
              <div style={{marginTop: '5px', height: '55px', overflow: 'hidden'}}>
                <div style={{width: '257px', float: 'left'}}>
                  <img style={{display: 'inline-block', verticalAlign: 'baseline'}} src={ma}/>
                  <div style={{display: 'inline-block'}}>
                    <div style={{fontSize: '25px'}}>发货单</div>
                    <div style={{fontSize: '15px'}}>OFFICE DOCUMENTS</div>
                  </div>
                </div>
                <div style={{float: 'right'}}>
                  <img src={img} />
                </div>
              </div>
              <div>
                供应商订单号：{record.sheetid}
              </div>
              <ul style={{listStyle: 'none', overflow: 'hidden', margin: '0', padding: '0', marginTop: '10px'}}>
                <li style={{float: 'left', minWidth: '20%', marginRight: '30px'}}>供应商名称：{user.venderInfo.Name}</li>
                <li style={{float: 'left', minWidth: '20%', marginRight: '30px'}}>供应商编号：{user.venderInfo.Id}</li>
                <li style={{float: 'left', minWidth: '20%', marginRight: '30px'}}>新货□ 补货□ 仓补□</li>
                <li style={{float: 'left', minWidth: '20%'}}>打印日期：{new Date().getNowDate()}</li>
              </ul>
              <table style={{border: '1px solid', width: '100%', borderCollapse: 'collapse', textAlign: 'center' , marginTop: '5px'}}>
                <tbody>
                  <tr>
                    <td style={{border: '1px solid', padding: '5px 5px'}}>商品名称</td>
                    <td style={{border: '1px solid', padding: '5px 5px'}}>条码</td>
                    <td style={{border: '1px solid', padding: '5px 5px'}}>货号</td>
                    <td style={{border: '1px solid', padding: '5px 5px'}}>颜色</td>
                    <td style={{border: '1px solid', padding: '5px 5px'}}>尺码</td>
                    <td style={{border: '1px solid', padding: '5px 5px'}}>计划数量</td>
                    <td style={{border: '1px solid', padding: '5px 5px'}}>单价</td>
                    <td style={{border: '1px solid', padding: '5px 5px'}}>计划金额</td>
                    <td style={{border: '1px solid', padding: '5px 5px'}}>实发数量</td>
                    <td style={{border: '1px solid', padding: '5px 5px'}}>实发金额</td>
                  </tr>
                  {data.list.map((row: any) => (
                    <tr key={row.barcode}>
                      <td style={{border: '1px solid', padding: '5px 5px'}}>{row.goodslname}</td>
                      <td style={{border: '1px solid', padding: '5px 5px'}}>{row.barcode}</td>
                      <td style={{border: '1px solid', padding: '5px 5px'}}>{row.customno}</td>
                      <td style={{border: '1px solid', padding: '5px 5px'}}>{row.colorid}</td>
                      <td style={{border: '1px solid', padding: '5px 5px'}}>{row.sizeid}</td>
                      <td style={{border: '1px solid', padding: '5px 5px'}}>{row.qty}</td>
                      <td style={{border: '1px solid', padding: '5px 5px'}}>{row.cost}</td>
                      <td style={{border: '1px solid', padding: '5px 5px'}}>{row.costvalue}</td>
                      <td style={{border: '1px solid', padding: '5px 5px'}}>{row.note2}</td>
                      <td style={{border: '1px solid', padding: '5px 5px'}}>{row.noteje}</td>
                    </tr>
                  ))}
                  <tr>
                    <td style={{border: '1px solid', padding: '5px 5px'}} colSpan={5} >合计</td>
                    <td style={{border: '1px solid', padding: '5px 5px'}}>{totalOne}</td>
                    <td style={{border: '1px solid', padding: '5px 5px'}}>--</td>
                    <td style={{border: '1px solid', padding: '5px 5px'}}>{head.costvalue}</td>
                    <td style={{border: '1px solid', padding: '5px 5px'}}>{totalTwo}</td>
                    <td style={{border: '1px solid', padding: '5px 5px'}}>{totalThree}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          
        </Card>
      </PageHeaderLayout>
    )
  }
}
export default Form.create()(OrderDetail)